<template>
	<view class="chartroom">
		<view class="header">
			<image class="img back" src="../../static/images/commom/back.png" @tap="back"></image>
			<view class="username">
				{{name}}
			</view>
			<image class="img user" :src="imgurl" @tap="togroupinfo" v-if="tap == 1"></image>
		</view>
		<chartinfo @screentap = "screentap" ref="mychartinfo" :fid = "fid" :uid = "uid" :token = "token" :tap = "tap"></chartinfo>
		<chartoperate ref="operate" 
		@infosend = "infosend" 
		@showmorebox = "showmorebox"
		:fid = "fid" 
		:uid = "uid" 
		:token = "token"
		:imgurl = "myimgurl"></chartoperate>
	</view>
</template>

<script>
	import chartinfo from "../../components/chartinfo/chartinfo.vue"
	import chartoperate from "../../components/chartoperate/chartoperate.vue"
	export default {
		data() {
			return {
				user:{},
				fid:'',
				uid:'',
				imgurl:'',
				tap:'',//0为好友1为群
				name:''//好友名字
			};
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.$refs.mychartinfo.nextpage()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(e) {
			this.imgurl = e.imgurl;
			this.name = e.name;
			this.tap = e.tap;
			this._gettoken()
			this.fid = e.id;//在群内的话也可表示为群id
			this.uid = this.user.id;
			this.token = this.user.token;
			this.myimgurl = this.user.imgurl;
			this.updatamsgstate();//修改未读信息状态
			// this._getmsgsocket()
		},
		methods:{
			// _getmsgsocket(){//获取发送过来的数据
			// 	this.socket.on('msg',(data,tip)=>{				
			// 		if(data.uid === this.fid && tip == 0){//当前页面的id值要与发送者的id值相同
			// 			this.$refs.mychartinfo.recivedmsg(data)
			// 		}
			// 	})
			// },
			updatamsgstate(){//修改信息已读未读状态
				let url = ""
				if(this.tap == 0){
					url = this.serverurl+"index/updatemsg"
				}else if(this.tap == 1){
					url = this.serverurl+"index/updategroupmsg"			
				}
				uni.request({
					url:url,
					data:{
						uid:this.uid,
						fid:this.fid,
						token:this.token
					},
					method:'POST',
					success: (result) => {
						let info = result.data;
						if(info.status == 200){
							console.log("修改未读信息状态成功")
						}else if(info.status == 300){
							uni.navigateTo({//token过期
								url:"../llogin/llogin?name="+this.user.name
							})
						}	
					}
				})
			},
			_gettoken(){//获取传递过来的用户数据
				try
				{
					const value = uni.getStorageSync('wikiuser');
					if (value) {
						this.user = JSON.parse(value);
					}
				} 
				catch (err) {
					console.log(err)
				}
				this.user.imgurl = this.serverurl+`userimage/${this.user.imgurl}`;
			},
			back(){
				uni.navigateTo({
					url:"../../pages/friendslist/friendslist"
				})
				// uni.navigateBack({
				//     delta:1
				//  })
			},
			togroupinfo(){//跳转到群详细页面
			console.log(this.fid)
				uni.navigateTo({
					url:"../../pages/groupinfo/groupinfo?id="+this.fid
				})
			},
			infosend(data){
				// console.log(data)//发送的消息
				this.$refs.mychartinfo.recivedmsg(data)
				this.socketSend(data)
			},
			screentap(){
				this.$refs.operate.closemorebox()
			},
			showmorebox(flag){
				this.$refs.mychartinfo.changeheight(flag)
			},
			socketSend(data){
				if(this.tap == 0){//好友消息
					this.socket.emit('msg',data)
				}else if(this.tap == 1){//群消息
					this.socket.emit('groupmsg',data)
				}
			}
		},
		components:{
			chartinfo,
			chartoperate
		}
	}
</script>

<style lang="scss">
.chartroom{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color:  rgba(245, 245, 245, 100);
	margin-top: var(--status-bar-height); 
	padding-bottom: env(safe-area-inset-bottom); 
	// display: flex;
	// padding-bottom: 0;  
	// padding-bottom: constant(safe-area-inset-bottom);  
	// padding-bottom: env(safe-area-inset-bottom); 
	.header{
		flex: 0 0 120rpx;
		height: 120rpx;
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 28rpx;
		box-sizing: border-box;
		position: relative;
		.img{
			position: absolute;
			display: block;
			top: 50%;
			transform: translateY(-50%);
			&.back{
				width: 48rpx;
				height: 48rpx;
				left: 28rpx;
			}
			&.user{
				box-sizing: border-box;
				right: 28rpx;
				width: 70rpx;
				height: 70rpx;
				border-radius: 56rpx;
				border: 4rpx solid rgba(52, 199, 88, 100);
			}
		}
		.username{
			color: rgba(74, 71, 71, 100);
			font-size: 40rpx;
			text-align: center;
			line-height: 120rpx;
			height: 100%;
			font-weight: bold;
		}
	}
}
</style>
